﻿@model Niunan.VideoSys.Model.Video
@{
    ViewBag.Title = Model.id == 0 ? "新增视频":"编辑视频";
}
<form action="" method="post">
    <div class='formtitle'><span>@ViewBag.Title</span></div>
    <div class='layui-form'>
        <div class='layui-form-item'>
            <label class='layui-form-label'>标题</label>
            <div class='layui-input-inline'>
                @Html.TextBoxFor(a => a.title, new { @class = "layui-input" })
            </div>
            <div class='layui-form-mid layui-word-aux'><!--辅助文字--></div>
        </div>
        <div class='layui-form-item'>
            <label class='layui-form-label'>图片</label>
            <div class='layui-input-block'>
                <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();" />  
                <span style="color:red;">允许上传jpg,png格式，上传后会自动把图片压缩成200px*100px的大小</span>
                <div>文件类型：<strong id="span_type"></strong></div>
                <div>文件大小：<strong id="span_size"></strong></div>
                <div>上传进度：<strong id="span_jindu"></strong></div>
                <img id="img1" style="max-width:200px;max-height:100px;" src="@Model.img" />
                @Html.HiddenFor(a=>a.img)
            </div>
            <div class='layui-form-mid layui-word-aux'><!--辅助文字--></div>
        </div>
        <div class='layui-form-item'>
            <label class='layui-form-label'>简述</label>
            <div class='layui-input-inline'>
                @Html.TextAreaFor(a => a.body, new { @class = "layui-input", style="width:330px;height:90px;" })


            </div>
            <div class='layui-form-mid layui-word-aux'><!--辅助文字--></div>
        </div>
        <div class='layui-form-item'>
            <div class='layui-input-block'>
                <button type="submit" class='layui-btn'>@ViewBag.Title</button>
                @Html.HiddenFor(a=>a.id)
                @Html.AntiForgeryToken()
            </div>
        </div>
    </div>

</form>

<script>
    /*H5上传*/
    function fileSelected() {
        var file = document.getElementById('fileToUpload').files[0];
        if (file) {
            var fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString();
            console.log('文件名：' + file.name);
            $('#span_type').html( file.type);
            $('#span_size').html(fileSize + "MB")
          

            if (file.type != "image/png" && file.type != "image/jpeg") {
                alert('只能上传jpg,png格式的图片！');
                return;
            }

            if (fileSize > 20) {
                alert('请上传20M以内的图片！');
                return;
            }

            uploadFile();

           
        }

        function uploadFile() {
            var fd = new FormData();
            fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
            var xhr = new XMLHttpRequest();
            xhr.upload.addEventListener("progress", uploadProgress, false);
            xhr.addEventListener("load", uploadComplete, false);
            xhr.addEventListener("error", uploadFailed, false);
            xhr.addEventListener("abort", uploadCanceled, false);
            xhr.open("POST", "/Adnn1n/Home/H5Upload");
            xhr.send(fd);
        }  

        function uploadProgress(evt) {
            if (evt.lengthComputable) {
                var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                document.getElementById('span_jindu').innerHTML = percentComplete.toString() + '%'; 
            }
            else {
                document.getElementById('span_jindu').innerHTML = 'unable to compute';
            }
        }

        function uploadComplete(evt) {
            /* This event is raised when the server send back a response */
            var json = eval("(" + evt.target.responseText + ")");
            if (json.status == "no") {
                alert(json.info);
            } else {
                document.getElementById("img1").src = json.path;
                document.getElementById("img").value = json.path;
            }
        }

        function uploadFailed(evt) {
            alert("There was an error attempting to upload the file.");
        }

        function uploadCanceled(evt) {
            alert("The upload has been canceled by the user or the browser dropped the connection.");
        }  
    }  
    /*H5上传 end*/
</script>